<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="160px" size="small" style="overflow-y: auto">

    <p style="padding-left: 20px;">基本信息</p>
    <el-row type="flex" style="flex-wrap: wrap">
      <el-col :span="6">
        <el-form-item label="姓名" prop="userName">
          {{user.userName}}
        </el-form-item>
        <el-form-item label="出生年月" prop="birthday">
          <el-date-picker
            v-model="user.birthday"
            type="month"
            format="yyyy.MM"
            value-format="yyyy.MM"
            placeholder="请选择出生年月"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="user.sex">
            <el-radio-button
              v-for="dict in dict.type.sys_user_sex"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="政治面貌" prop="politicsOutlook">
          <el-select
            v-model="user.politicsOutlook"
            placeholder="请选择政治面貌"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="dict in dict.type.politics_outlook"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="民族" prop="nation">
          <el-select
            v-model="user.nation"
            placeholder="请选择民族"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="dict in dict.type.nation"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard">
          <el-input
            v-emoji
            v-model="user.idcard"
            placeholder="请输入身份证号"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6" style="text-align: center;">
        <userAvatar :user="user"/>
      </el-col>
      <el-col :span="6">
        <el-form-item label="籍贯" prop="nativePlace">
          <el-input
            v-model="user.nativePlace"
            placeholder="请输入籍贯"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="婚姻状况" prop="maritalStatus">
          <el-select v-model="user.maritalStatus" placeholder="请选择婚姻状况" clearable style="width: 100%">
            <el-option
              v-for="dict in dict.type.marital_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="家庭住址" prop="homeAddress">
          <el-input
            v-model="user.homeAddress"
            placeholder="具体到门牌号"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="通讯地址" prop="mailAddress">
          <el-input
            v-model="user.mailAddress"
            placeholder="具体到门牌号"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="参加工作时间" prop="workTime">
          <el-date-picker
            v-model="user.workTime"
            type="date"
            placeholder="请选择参加工作时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="进入昌泰集团时间" prop="entryTime">
          <el-date-picker
            v-model="user.entryTime"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择进入昌泰集团时间"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="进入本公司时间" prop="joinCompanyTime">
          <el-date-picker
            v-model="user.joinCompanyTime"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择进入本公司时间"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="职务" prop="dutyName">
          <el-input
            v-emoji
            v-model="user.dutyName"
            placeholder="请输入职务"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="任现职务时间" prop="dutyTime">
          <el-date-picker
            v-model="user.dutyTime"
            type="date"
            placeholder="请选择任现职务时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="用工形式" prop="employType">
          <el-select
            v-model="user.employType"
            placeholder="用工形式"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="dict in dict.type.sys_employ_type"
              :key="dict.value"
              :label="dict.label"
              :value="Number(dict.value)"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="职级" prop="ranking">
          <el-select v-model="user.ranking" placeholder="请选择职级" clearable style="width: 100%">
            <el-option-group
              v-for="group in rankingOptions"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="任现职级时间" prop="rankingTime">
          <el-date-picker
            v-model="user.rankingTime"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择任现职级时间"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="所在党支部" prop="partyBranch">
          <el-input
            v-model="user.partyBranch"
            placeholder="请输入所在党支部"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="入党时间" prop="joinPoliticalTime">
          <el-date-picker
            v-model="user.joinPoliticalTime"
            type="date"
            placeholder="请选择入党时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="转正时间" prop="confirmationTime">
          <el-date-picker
            v-model="user.confirmationTime"
            type="date"
            placeholder="请选择转正时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="党内职务" prop="partyTitle">
          <el-input
            v-model="user.partyTitle"
            placeholder="请输入党内职务"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <p style="padding-left: 20px;">账号信息</p>
    <el-row type="flex" style="flex-wrap: wrap">
      <el-col :span="6">
        <el-form-item label="工号" prop="jobNumber">
          <el-input
            v-emoji
            v-model="user.jobNumber"
            placeholder="请输入工号"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="user.phonenumber" maxlength="11" />
        </el-form-item>
      </el-col>
    </el-row>

    <p style="padding-left: 20px;">个人积分</p>
    <el-row type="flex" style="flex-wrap: wrap; ">
      <el-col :span="6">
        <el-form-item label="历史积分" prop="historyScore">
          {{user.historyScore ? user.historyScore : '无'}}
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="2025年积分" prop="score2025">
          {{user.score2025 ? user.score2025 : '无'}}
        </el-form-item>
      </el-col>
    </el-row>

    <p style="padding-left: 20px;">个人简历</p>
    <div style="display: flex; margin-bottom: 10px;">
      <div class="el-form-item__label label">学习经历</div>
      <div style="width: 90%">
        <elx-editable
          ref="educationalEditable"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          :edit-rules="{school: [{required: true, message: '请输入学校', trigger: 'blur'}]}"
          :data.sync="educationalBackgrounds"
        >
          <elx-editable-column width="60">
            <template #header>
              <i class="el-icon-circle-plus-outline columnIcon" @click="$refs.educationalEditable.insert()"></i>
            </template>
            <template #default="{row}">
              <i class="el-icon-delete columnIcon" @click="$refs.educationalEditable.remove(row)" style="color: red;"></i>
            </template>
          </elx-editable-column>
          <elx-editable-column
            prop="startTime"
            label="开始时间"
            :edit-render="{name: 'ElDatePicker', type: 'visible', props: {type: 'month', format: 'yyyy.MM', valueFormat: 'yyyy.MM'}}"></elx-editable-column>
          <elx-editable-column
            prop="endTime"
            label="结束时间"
            :edit-render="{name: 'ElDatePicker', type: 'visible', props: {type: 'month', format: 'yyyy.MM', valueFormat: 'yyyy.MM'}}"></elx-editable-column>
          <elx-editable-column
            prop="school"
            label="学校"
            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="major"
            label="专业"
            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="format"
            label="学习形式"
            :edit-render="{name: 'ElSelect', type: 'visible', options: formatList}"></elx-editable-column>
          <elx-editable-column
            prop="academic"
            label="学历"
            :edit-render="{name: 'ElSelect', type: 'visible', options: academicList}"></elx-editable-column>
          <elx-editable-column
            prop="degree"
            label="学位"
            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="isHighest"
            label="最高学历"
            :edit-render="{name: 'ElSwitch', type: 'visible', props: {'activeValue': 'Y', 'inactiveValue': 'N'}}"
          ></elx-editable-column>
        </elx-editable>
      </div>
    </div>
    <div style="display: flex; margin-bottom: 10px;">
      <div class="el-form-item__label label">工作经历</div>
      <div style="width: 90%">
        <elx-editable
          ref="workExperienceEditable"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          :edit-rules="{unit: [{required: true, message: '请输入工作单位', trigger: 'blur'}]}"
          :data.sync="workExperience"
        >
          <elx-editable-column width="60">
            <template #header>
              <i class="el-icon-circle-plus-outline columnIcon" @click="$refs.workExperienceEditable.insert()"></i>
            </template>
            <template #default="{row}">
              <i class="el-icon-delete columnIcon" @click="$refs.workExperienceEditable.remove(row)" style="color: red;"></i>
            </template>
          </elx-editable-column>
          <elx-editable-column
            prop="startTime"
            label="开始时间"
            :edit-render="{name: 'ElDatePicker', type: 'visible', props: {type: 'month', format: 'yyyy.MM', valueFormat: 'yyyy.MM'}}"></elx-editable-column>
          <elx-editable-column
            prop="endTime"
            label="结束时间"
            :edit-render="{name: 'ElDatePicker', type: 'visible', props: {type: 'month', format: 'yyyy.MM', valueFormat: 'yyyy.MM'}}"></elx-editable-column>
          <elx-editable-column
            prop="unit"
            label="工作单位"
            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="department"
            label="部门"
            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="position"
            label="职务"
            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="leaveReason"
            label="离职原因"
            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="type"
            label="人员类型"
            :edit-render="{name: 'ElSelect', type: 'visible', options: employTypeList}"></elx-editable-column>
          <elx-editable-column
            prop="isPartTime"
            label="是否兼职"
            :edit-render="{name: 'ElSwitch', type: 'visible', props: {'activeValue': 'Y', 'inactiveValue': 'N'}}">
          </elx-editable-column>
        </elx-editable>
      </div>
    </div>
    <div style="display: flex; margin-bottom: 10px;">
      <div class="el-form-item__label label">劳动合同</div>
      <div style="width: 90%">
        <elx-editable
          ref="contractEditable"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          :edit-rules="{startTime: [{required: true, message: '请输入开始时间', trigger: 'blur'}]}"
          :data.sync="laborContracts"
        >
          <elx-editable-column width="60">
            <template #header>
              <i class="el-icon-circle-plus-outline columnIcon" @click="$refs.contractEditable.insert()"></i>
            </template>
            <template #default="{row}">
              <i class="el-icon-delete columnIcon" @click="$refs.contractEditable.remove(row)" style="color: red;"></i>
            </template>
          </elx-editable-column>
          <elx-editable-column
            prop="startTime"
            label="开始时间"
            :edit-render="{name: 'ElDatePicker', type: 'visible', props: {type: 'month', format: 'yyyy.MM', valueFormat: 'yyyy.MM'}}"></elx-editable-column>
          <elx-editable-column
            prop="endTime"
            label="结束时间"
            :edit-render="{name: 'ElDatePicker', type: 'visible', props: {type: 'month', format: 'yyyy.MM', valueFormat: 'yyyy.MM'}}"></elx-editable-column>
          <elx-editable-column
            prop="renewals"
            label="续签次数"
            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="type"
            label="合同类型"
            :edit-render="{name: 'ElSelect', type: 'visible', options: contractTypeList}"></elx-editable-column>
          <elx-editable-column
            prop="term"
            label="合同期限"
            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="signUnit"
            label="合同签订单位"
            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
        </elx-editable>
      </div>
    </div>


    <div style="display: flex; margin-bottom: 10px;">
      <div class="el-form-item__label label">考核结果</div>
      <div style="width: 90%">
        <elx-editable
          ref="assessEditable"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          :data.sync="assesses"
        >
          <elx-editable-column
            prop="annual"
            label="考核年度"
            width="260"
          >
          </elx-editable-column>
          <elx-editable-column
            prop="level"
            label="考核等级"
            width="260"
          >
          </elx-editable-column>
        </elx-editable>
      </div>
    </div>
    <div style="display: flex; margin-bottom: 10px;">
      <div class="el-form-item__label label">培训经历</div>
      <div style="width: 90%">
        <elx-editable
          ref="trainingEditable"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          :data.sync="trainings"
        >
          <elx-editable-column
            prop="startTime"
            label="开始时间"
          ></elx-editable-column>
          <!--            <elx-editable-column-->
          <!--              prop="endTime"-->
          <!--              label="结束时间"-->
          <!--              :edit-render="{name: 'ElDatePicker',  props: {type: 'month', format: 'yyyy.MM', valueFormat: 'yyyy.MM'}}"></elx-editable-column>-->
          <elx-editable-column
            prop="name"
            label="培训名称"
          ></elx-editable-column>
          <elx-editable-column
            prop="levelName"
            label="培训层级"
          ></elx-editable-column>
          <elx-editable-column
            prop="unit"
            label="培训单位"
          ></elx-editable-column>
          <elx-editable-column
            prop="describe"
            label="培训描述"
          ></elx-editable-column>
        </elx-editable>
      </div>
    </div>
    <div style="display: flex; margin-bottom: 10px;">
      <div class="el-form-item__label label">任务经历</div>
      <div style="width: 90%">
        <elx-editable
          ref="tasksEditable"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          :data.sync="tasks"
        >
          <elx-editable-column
            prop="startTime"
            label="开始时间"
          ></elx-editable-column>
          <elx-editable-column
            prop="name"
            label="任务名称"
          ></elx-editable-column>
          <elx-editable-column
            prop="levelName"
            label="任务层级"
          ></elx-editable-column>
          <elx-editable-column
            prop="unit"
            label="任务单位"
          ></elx-editable-column>
          <elx-editable-column
            prop="describe"
            label="任务描述"
          ></elx-editable-column>
        </elx-editable>
      </div>
    </div>

    <div style="display: flex; margin-bottom: 10px;">
      <div class="el-form-item__label label">职称</div>
      <div style="width: 90%">
        <elx-editable
          ref="titlesEditable"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          :edit-rules="{name: [{required: true, message: '请输入职称名称', trigger: 'blur'}]}"
          :data.sync="titles"
        >
          <elx-editable-column width="60">
            <template #header>
              <i class="el-icon-circle-plus-outline columnIcon" @click="$refs.titlesEditable.insert()"></i>
            </template>
            <template #default="{row}">
              <i class="el-icon-delete columnIcon" @click="$refs.titlesEditable.remove(row)" style="color: red;"></i>
            </template>
          </elx-editable-column>
          <elx-editable-column
            prop="name"
            label="名称"

            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="grade"
            label="等级"

            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="profession"
            label="专业"

            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="assessmentTime"
            label="评定时间"

            :edit-render="{name: 'ElDatePicker', type: 'visible', props: {type: 'month', format: 'yyyy.MM', valueFormat: 'yyyy.MM'}}"></elx-editable-column>
        </elx-editable>
      </div>
    </div>
    <div style="display: flex; margin-bottom: 10px;">
      <div class="el-form-item__label label">职业资格</div>
      <div style="width: 90%">
        <elx-editable
          ref="professionalEditable"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          :edit-rules="{name: [{required: true, message: '请输入名称', trigger: 'blur'}]}"
          :data.sync="professionalQualifications"
        >
          <elx-editable-column width="60">
            <template #header>
              <i class="el-icon-circle-plus-outline columnIcon" @click="$refs.professionalEditable.insert()"></i>
            </template>
            <template #default="{row}">
              <i class="el-icon-delete columnIcon" @click="$refs.professionalEditable.remove(row)" style="color: red;"></i>
            </template>
          </elx-editable-column>
          <elx-editable-column
            prop="name"
            label="名称"

            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="level"
            label="等级"

            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="obtainingTime"
            label="获得时间"

            :edit-render="{name: 'ElDatePicker', type: 'visible', props: {type: 'month', format: 'yyyy.MM', valueFormat: 'yyyy.MM'}}"></elx-editable-column>
        </elx-editable>
      </div>
    </div>
    <div style="display: flex; margin-bottom: 10px;">
      <div class="el-form-item__label label">家庭成员</div>
      <div style="width: 90%">
        <elx-editable
          ref="familyEditable"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          :edit-rules="{name: [{required: true, message: '请输入姓名', trigger: 'blur'}]}"
          :data.sync="familyMembers"
        >
          <elx-editable-column width="60">
            <template #header>
              <i class="el-icon-circle-plus-outline columnIcon" @click="$refs.familyEditable.insert()"></i>
            </template>
            <template #default="{row}">
              <i class="el-icon-delete columnIcon" @click="$refs.familyEditable.remove(row)" style="color: red;"></i>
            </template>
          </elx-editable-column>
          <elx-editable-column
            prop="name"
            label="姓名"

            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="relationship"
            label="与本人关系"

            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="birthday"
            label="出生日期"

            :edit-render="{name: 'ElDatePicker', type: 'visible', props: {type: 'date', format: 'yyyy.MM.dd', valueFormat: 'yyyy.MM.dd'}}"></elx-editable-column>
          <elx-editable-column
            prop="unit"
            label="工作单位及职务"

            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
        </elx-editable>
      </div>
    </div>
    <div style="display: flex; margin-bottom: 10px;">
      <div class="el-form-item__label label">紧急联系人</div>
      <div style="width: 90%">
        <elx-editable
          ref="emergencyEditable"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          :edit-rules="{name: [{required: true, message: '请输入姓名', trigger: 'blur'}]}"
          :data.sync="emergencyContacts"
        >
          <elx-editable-column width="60">
            <template #header>
              <i class="el-icon-circle-plus-outline columnIcon" @click="$refs.emergencyEditable.insert()"></i>
            </template>
            <template #default="{row}">
              <i class="el-icon-delete columnIcon" @click="$refs.emergencyEditable.remove(row)" style="color: red;"></i>
            </template>
          </elx-editable-column>
          <elx-editable-column
            prop="name"
            label="姓名"
            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="relationship"
            label="与本人的关系"

            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
          <elx-editable-column
            prop="contactNumber"
            label="联系电话"

            :edit-render="{name: 'ElInput', type: 'visible'}"></elx-editable-column>
        </elx-editable>
      </div>
    </div>

    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateUserProfile } from "@/api/system/user";
import { getDicts } from "@/api/system/dict/data";
import userAvatar from "@/views/system/user/profile/userAvatar.vue";

export default {
  components: {userAvatar},
  props: {
    user: {
      type: Object
    },
    tasks: {
      type: Array
    },
    trainings: {
      type: Array
    },
    assesses: {
      type: Array
    },

  },
  dicts: [
    "sys_user_sex",
    "marital_status",
    "format",
    "academic",
    "sys_employ_type",
    "contract_type",
    "reward_level",
    "nation",
    "politics_outlook"
  ],
  data() {
    return {
      educationalBackgrounds:[],
      workExperience: [],
      laborContracts: [],
      titles: [],
      professionalQualifications: [],
      familyMembers: [],
      emergencyContacts: [],

      // 表单校验
      rules: {
        userName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        sex: [{required: true, message: "请选择性别", trigger: "blur"}],
        idcard: [
          {
            required: true,
            pattern:
              /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "请输入正确的身份证号",
            trigger: "blur",
          },
        ],
        politicsOutlook: [
          {required: true, message: "请选择政治面貌", trigger: "blur"},
        ],
        dutyName: [
          {required: true, message: "请输入职务", trigger: "blur"},
          {max: 20, message: "职务不可超过20字", trigger: "blur"},
        ],
        employType: [
          {required: true, message: "请选择用工形式", trigger: "change"},
        ],
      },
      rankingOptions: [],

    };
  },
  mounted() {
    if (this.user.assesses) {
      this.assesses = this.user.assesses;
    }
    if (this.user.trainings) {
      this.trainings = this.user.trainings;
    }
    if (this.user.tasks) {
      this.tasks = this.user.tasks;
    }
    getDicts("ranking").then(res => {
      if (res.code == 200) {
        this.rankingOptions = res.data
      }
    });
    if (this.user.educationalBackgrounds) {
      this.$set(this, "educationalBackgrounds", this.user.educationalBackgrounds);
    }
    if (this.user.workExperience) {
      this.$set(this, "workExperience", this.user.workExperience);
    }
    if (this.user.laborContracts) {
      this.$set(this, "laborContracts", this.user.laborContracts);
    }
    if (this.user.titles) {
      this.$set(this, "titles", this.user.titles);
    }
    if (this.user.professionalQualifications) {
      this.$set(this, "professionalQualifications", this.user.professionalQualifications);
    }
    if (this.user.familyMembers) {
      this.$set(this, "familyMembers", this.user.familyMembers);
    }
    if (this.user.emergencyContacts) {
      this.$set(this, "emergencyContacts", this.user.emergencyContacts);
    }
  },
  computed: {
    formatList: function () {
      if (this.dict.type.format) {
        return this.dict.type.format.map(item => {
          return {label: item.label, value: item.value, key: item.value};
        })
      } else {
        return [];
      }
    },
    academicList: function () {
      if (this.dict.type.academic) {
        return this.dict.type.academic.map(item => {
          return {label: item.label, value: item.value, key: item.value};
        });
      } else {
        return [];
      }
    },
    employTypeList: function () {
      if (this.dict.type.sys_employ_type) {
        return this.dict.type.sys_employ_type.map(item => {
          return {label: item.label, value: item.value, key: item.value};
        })
      } else {
        return [];
      }
    },
    contractTypeList: function () {
      if (this.dict.type.contract_type) {
        return this.dict.type.contract_type.map(item => {
          return {label: item.label, value: item.value, key: item.value};
        })
      } else {
        return [];
      }
    },
    rewardLevelList: function () {
      if (this.dict.type.reward_level) {
        return this.dict.type.reward_level.map(item => {
          return {label: item.label, value: item.value, key: item.value};
        })
      } else {
        return [];
      }
    },
  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$set(this.user, "educationalBackgrounds", this.educationalBackgrounds);
          this.$set(this.user, "workExperience", this.workExperience);
          this.$set(this.user, "laborContracts", this.laborContracts);
          this.$set(this.user, "titles", this.titles);
          this.$set(this.user, "professionalQualifications", this.professionalQualifications);
          this.$set(this.user, "familyMembers", this.familyMembers);
          this.$set(this.user, "emergencyContacts", this.emergencyContacts);

          updateUserProfile(this.user).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
    close() {
      this.$tab.closePage();
    }
  }
};
</script>
<style scoped lang="scss">
.label{
  width: 160px;
  font-weight: 700;
}
</style>
